<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>公司信息管理</title>
    <link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
    <link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../static/css/skins.css">
    <script type="text/javascript" src="../../lib/vue/vue.js"></script>
    <script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
    <script type="text/javascript" src="../../lib/element-ui/index.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
    <script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
    <script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
    <script type="text/javascript" src="../../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../static/js/webApi.js"></script>
    <script type="text/javascript" src="../../static/js/tool.js"></script>
    <script type="text/javascript" src="../../static/UEditor/ueditor.config.js"></script>
    <script type="text/javascript" src="../../static/UEditor/ueditor.all.js"></script>
    <script type="text/javascript" src="../../static/UEditor/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&
        ak=87f5cb8cf775ca274ab7bd690386562a"></script>
    <style type="text/css">
        /*
            找到html标签、body标签，和挂载的标签
            都给他们统一设置样式
        */
        html,
        body,
        #app,
        .el-container {
            /*设置内部填充为0，几个布局元素之间没有间距*/
            padding: 0px;
            /*外部间距也是如此设置*/
            margin: 0px;
            /*统一设置高度为100%*/
            height: 100%;
        }

        .el-main {
            padding: 4px;
        }
		.el-icon-search{
			color: #409EFF;
		}
		.el-icon-refresh-right{
			color: #409EFF;
		}
        [v-cloak] {
            display: none;
        }
        
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
          border-color: #409EFF;
        }
        .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 178px;
          height: 178px;
          line-height: 178px;
          text-align: center;
        }
        .avatar {
          width: 178px;
          height: 178px;
          display: block;
        }
        #mapContent {
            width: 100%;
            height: 90%;
            overflow: hidden;
            margin:0;
            font-family:"微软雅黑";
        }
    </style>
</head>
<body>
    <el-container id="app">
        <el-main>
            <el-form :inline="true" :model="queryData" ref="queryData" label-width="80px" label-position="right"
                size="mini" style="height: 35px" @submit.native.prevent>
                <el-form-item label="公司编号">
                    <el-input v-model="queryData.companyNo" placeholder="请输入关键字"></el-input>
                </el-form-item>
                <el-form-item label="公司名称">
                    <el-input v-model="queryData.name" placeholder="请输入关键字"></el-input>
                </el-form-item>
                <el-form-item label="联系人">
                    <el-input v-model="queryData.contacts" placeholder="请输入关键字"></el-input>
                </el-form-item>
				<el-form-item>
				    <el-button size="mini" icon="el-icon-search" @click="searchEvent">查询</el-button>
				    <el-button size="mini" icon="el-icon-refresh-right" @click="searchEventA">重置</el-button>
				</el-form-item>
            </el-form>

            <vxe-grid border ref="xGrid" @page-change="handlePageChange" resizable show-overflow
                highlight-current-row="true" keep-source :height="tableHeight" size="mini" :checkbox-config="tableRadio"
                :pager-config="tablePage" :data="tableData" :header-cell-style="{'text-align':'center'}"
                :loading="dataLoading" :toolbar="tableToolbar" :export-config="tableExport"
                @cell-dblclick="cellDBLClickEvent" :edit-config="{trigger:'click', mode:'row'}"
                @toolbar-button-click="toolbarButtonClickEvent" :sort-config="{remot:true}" @sort-change="tableSortChange">
                <vxe-table-column type="checkbox" width="60" align="center"></vxe-table-column>
                <vxe-table-column field="companyNo" title="公司编号" width="130" align="left" sortable='custom'>
                </vxe-table-column>
                <vxe-table-column field="name" title="公司名称" align="center">
                </vxe-table-column>
                <vxe-table-column field="type" title="公司类型" align="center">
                </vxe-table-column>
                <vxe-table-column field="socialCreditCode" title="社会信用代码" align="left">
                </vxe-table-column>
                <vxe-table-column field="profile" title="公司简介" width="100" align="left">
                </vxe-table-column>
                <vxe-table-column field="businessScope" title="经营范围" width="100" align="left" >
                </vxe-table-column>
                <vxe-table-column field="address" title="地址" align="left">
                </vxe-table-column>
                <vxe-table-column field="lnt" title="经度" width="60" align="center">
                </vxe-table-column>
                <vxe-table-column field="lat" title="纬度" width="60" align="center">
                </vxe-table-column>
                <vxe-table-column field="telephone" title="联系方式" align="center">
                </vxe-table-column>
                <vxe-table-column field="contacts" title="联系人" align="center">
                </vxe-table-column>
                <vxe-table-column field="headImg" title="头部预览图片" width="120">
                    <template #default="{ row }">
                        <el-popover placement="left" title trigger="hover">
                            <img
                                v-if="row.headImg"
                                :src="row.headImg"
                                :alt="row.headImg"
                                style="max-height: 500px;max-width: 500px"
                            />
                            <img slot="reference" :src="row.headImg" style="width: 100px;">
                        </el-popover>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="cUser" title="创建人" align="center">
                </vxe-table-column>
                <vxe-table-column field="cTime" title="创建时间" align="center" :formatter="formatDate">
                </vxe-table-column>
            </vxe-grid>

            <vxe-modal ref="xModal" v-model="showEdit" :title="selectRow ? '编辑&保存' :'新增&保存'" width="800"
                :loading="submitLoading" resize  id = "formWindow">
                <el-form :model="formData" :rules="formRules" ref="formData" label-width="120px" label-position="right"
                    size="mini">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="公司名称" prop="name">
                                <el-cascader v-model="formData.companyNo" :options="departOptions" ref = "companyNameCas"
                                    :props="{ expandTrigger: 'hover',multiple:false,emitPath:false }"
                                    clearable filterable style="width:100%" :show-all-levels="false"
                                    @change="nameSelected">
                                </el-cascader>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="公司类型" prop="type">
                                <el-input type="text" v-model="formData.type" placeholder="请输入公司类型" maxlength="200"
                                    show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="社会信用代码" prop="socialCreditCode">
                                <el-input type="text" v-model="formData.socialCreditCode" placeholder="请输入社会信用代码" maxlength="200"
                                    show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="公司地址" prop="address">
                                <el-input type="text" v-model="formData.address" placeholder="请输入公司地址" maxlength="100"
                                    show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-button @click="editMapMaker" size="mini" 
                                style = "display: block; margin: 0 auto;">选择地址坐标
                            </el-button>
                        </el-col>
                        <el-col :span="9">
                            <el-form-item label="经度" prop="lnt" label-width="80px">
                                <el-input type="text" v-model="formData.lnt" placeholder="请选择坐标" maxlength="200"
                                    show-word-limit :readonly="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="9">
                            <el-form-item label="纬度" prop="lat" label-width="80px">
                                <el-input type="text" v-model="formData.lat" placeholder="请选择坐标" maxlength="200"
                                    show-word-limit :readonly="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="公司简介" prop="profile">
                        <div id="detailEditor" v-model="formData.profile" ></div>
                    </el-form-item>
                    <el-form-item label="经营范围" prop="businessScope">
                        <div id="scopeEditor" v-model="formData.businessScope" ></div>
                    </el-form-item>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="联系方式" prop="telephone">
                                <el-input type="text" v-model="formData.telephone" placeholder="请输入联系方式" maxlength="200"
                                    show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="联系人" prop="contacts">
                                <el-input type="text" v-model="formData.contacts" placeholder="请输入联系人" maxlength="200"
                                    show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="头部预览图片" prop="headImg">
                        <el-upload
                            class="avatar-uploader"
                            :action="this.uploadUrl"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item style="text-align: right;">
                        <el-button type="primary" icon="el-icon-folder" @click="submitEvent('formData')"
                            :disabled="disabled" v-cloak>保存</el-button>
                        <el-button type="warning" icon="el-icon-refresh" @click="resetEvent('formData')" v-cloak>
                            重置
                        </el-button>
                        <el-button type="warning" icon="el-icon-switch-button" @click="closeEvent('formData')" v-cloak>
                            退出
                        </el-button>
                    </el-form-item>
                </el-form>
            </vxe-modal>

            <vxe-modal destroy-on-close resize title="选择地址坐标"
                v-model="gridmapModal" width="60%" height="80%">
                <!-- <el-form label-width="120px" label-position="center" size="mini">
                    <el-form-item label="请输入地址:">
                        <el-input id="inputAddress" type="text" v-model="mapAddress"></el-input>
                    </el-form-item>
                </el-form> -->
                <div id="mapContent"></div>
                <div style="text-align: end;padding: 10px">
                    <el-button @click="addressConfirm" icon="el-icon-folder"
                               type="primary" size="mini" v-cloak>确认</el-button>
                    <el-button @click="closeModel" icon="el-icon-switch-button" type="warning"  size="mini"
                               v-cloak>
                        退出
                </el-button>
                </div>
            </vxe-modal>
        </el-main>
    </el-container>
</body>
<script type="text/javascript">
    window.onload = function () {
        var main = {
            data() {
                return {
					//排序
					prop: '',
					order: '',
                    dataLoading: false,
                    loading: false,
                    disabled: false,
                    visible: false,
                    tableHeight: '100%',
                    departOptions: [],
                    tableData: [],
                    detailEditor: null,
                    scopeEditor: null,
                    uploadUrl: "",
                    imageUrl: "",
                    gridmapModal: false,
                    gridmapGisModal:false,
                    mapAddress: "",
                    mapLnt: "",
                    mapLat: "",
                    map: null,
                    centerMarker:[],
                    tablePage: {
                        perfect: true,
                        total: 0,
                        currentPage: 1,
                        pageSize: 30,
                        align: 'left',
                        pageSizes: [30, 50, 100, 200],
                        layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump',
                            'Total'
                        ],
                    },
                    tableToolbar: {
                        id: 'toolbar',
                        size: 'mini',
                        perfect: true,
                        buttons: [],
                    },
                    tableExport: {
                        filename: 'export',
                        sheetName: 'Sheet1',
                        type: 'xlsx',
                        // 自定义类型
                        types: ['xlsx', 'csv', 'html', 'xml', 'txt']
                    },
                    tableRadio: {
                        trigger: 'row',
                        highlight: true
                    },
                    submitLoading: false,
                    selectRow: null,
                    showEdit: false,
                    queryData: {
                        companyNo: "",
                        name: "",
                        contacts: ""
                    },
                    formData: {
                        companyNo: "",
                        name: "",
                        type: "",
                        socialCreditCode: "",
                        profile: "",
                        businessScope: "",
                        address: "",
                        lnt: "",
                        lat: "",
                        telephone: "",
                        contacts: "",
                        headImg: "",
                        isShow: ""
                    },
                    formRules: {
                        // companyNo: [{
                        //         required: true,
                        //         message: '请输入公司编码'
                        //     }
                        // ],
                        name: [{
                                required: true,
                                message: '请选择公司名称'
                            },
                            {
                                min: 1,
                                max: 200,
                                message: '长度在1到200个字符'
                            }
                        ],
                        type: [{
                                required: true,
                                message: '请输入公司类型'
                            },
                            {
                                min: 1,
                                max: 20,
                                message: '长度在1到20个字符'
                            }
                        ],
                        socialCreditCode: [{
                                required: true,
                                message: '请输入社会信用代码'
                            },
                            {
                                min: 1,
                                max: 32,
                                message: '长度在1到32个字符'
                            }
                        ]
                    }
                }
            },
            created() {
                this.findList();
                this.getBtn();
                this.uploadUrl = window.curl + '/attach/uploadAtt';
                UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
	            UE.Editor.prototype.getActionUrl = function(action) {    
	            if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadvideo') {  
                    let path = window.curl + '/attach/uploadUeditorAtt';
	                return path; //调用后台接口上传图片   
	                } else {    
	                    return this._bkGetActionUrl.call(this, action);    
	                }    
	            }
                this.detailEditor = UE.getEditor('detailEditor', {
			    initialFrameWidth : '95%',
			    initialFrameHeight : 250,
			    elementPathEnabled : false, //删除元素路径
			    pasteplain : true, /* 纯文本粘贴 */
			    autoHeightEnabled : true,/* 启用右侧滚轮,默认是true自动长高模式*/
			    autoFloatEnabled : true
		        });
                this.scopeEditor = UE.getEditor('scopeEditor', {
			    initialFrameWidth : '95%',
			    initialFrameHeight : 250,
			    elementPathEnabled : false, //删除元素路径
			    pasteplain : true, /* 纯文本粘贴 */
			    autoHeightEnabled : true,/* 启用右侧滚轮,默认是true自动长高模式*/
			    autoFloatEnabled : true
		        });
                
            },
            mounted() {
                this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 5;
            },
            methods: {
				searchEvent() {
						this.findList();
				},
				searchEventA() {
						this.queryData.companyNo = "";
                        this.queryData.name = "";
                        this.queryData.contacts = "";
						this.findList();
				},
                getTreeData(data) {
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].children.length < 1) {
                            // children若为空数组，则将children设为undefined
                            data[i].children = undefined;
                        } else {
                            // children若不为空数组，则继续 递归调用 本方法
                            this.getTreeData(data[i].children);
                        }
                    }
                    return data;
                },
                getBtn() {
                    this.tableToolbar.buttons = []
                    let bts = Tool.getButton()
                    let btns = []
                    this.tableToolbar.buttons = btns.concat(bts)
                },
                //分页
                handlePageChange({
                    currentPage,
                    pageSize
                }) {
                    this.tablePage.currentPage = currentPage
                    this.tablePage.pageSize = pageSize
                    this.findList()
                },
                findList() {
                    let queryParams = Object.assign({
                        start: this.tablePage.currentPage,
                        limit: this.tablePage.pageSize,
                        companyNo: this.queryData.companyNo,
                        name: this.queryData.name,
                        contacts: this.queryData.contacts
                    });
                    this.dataLoading = true;
                    var object = this;
                    webApi("/company/list", "get", queryParams, function (data) {
                        object.tableData = data.data.list;
                        object.tablePage.total = data.data.total
                        object.dataLoading = false;
                        object.getDepartOptions();
                    }, function (data) {
                        object.tableData = [];
                        object.tablePage.total = 0
                        object.dataLoading = false;
                    });
                },
                getDepartOptions() {
                    let that = this;
                    webApi('/org/getOrgOptions', 'post', {}, function (data) {
                        that.departOptions = that.getTreeData(data.data);
                    }, function (xhr, type, errorThrown) {})
                },
                searchEvent(formName, acType) {
                    if (acType == 0) {
                        this.queryData.companyNo = "";
                        this.queryData.name = "";
                        this.queryData.contacts = "";
                    }
                    this.tablePage.currentPage = 1
                    this.findList()
                },
                formatDate({
                    cellValue
                }) {
                    return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
                },
                toolbarButtonClickEvent({
                    code
                }, event) {
                    switch (code) {
                        case 'reset':
                            this.searchEvent(this.queryData, 0)
                            break;
                        case 'search':
                            this.searchEvent(this.queryData, 1)
                            break;
                        case 'btnInsert':
                            var row = this.$refs.xGrid.getCheckboxRecords();
                            if (row) {
                                var parentCode = row.parentMenuId;
                            } else {
                                var parentCode = "";
                            }
                            this.insertEvent(parentCode);
                            break;
                        case 'btnUpdate':
                            if (this.$refs.xGrid.getCheckboxRecords().length == 1) {
                                let row = this.$refs.xGrid.getCheckboxRecords()
                                this.editEvent(row[0]);
                            } else if (this.$refs.xGrid.getCheckboxRecords().length > 1) {
                                this.$message({
                                    message: "数据大于一条，无法修改",
                                    type: 'warning',
                                    center: true
                                });
                            } else {
                                this.$message({
                                    message: "请选择一行数据",
                                    type: 'warning',
                                    center: true
                                });
                            }
                            break;
                        case 'btnDelete':
                            var row = this.$refs.xGrid.getCheckboxRecords();
                            console.log(row)
                            if (row.length > 0) {
                                this.removeEvent(row);
                            } else {
                                this.$message({
                                    message: "请选择需要删除的数据行",
                                    type: 'warning',
                                    center: true
                                });
                            }
                            break;
                        case 'btnExport':
                            this.$refs.xGrid.exportData({
                                filename: '菜单列表',
                                sheetName: 'Sheet1',
                                type: 'xlsx'
                            });
                            break;
                    }
                },
                nameSelected(value){
                    if (value) {
                    // console.log(this.$refs.companyNameCas.getCheckedNodes()[0]);
                    this.formData.name = this.$refs.companyNameCas.getCheckedNodes()[0].label;
                    }
                },
                insertEvent() {
                    this.formData = {
                        companyNo: "",
                        name: "",
                        type: "",
                        socialCreditCode: "",
                        profile: "",
                        businessScope: "",
                        address: "",
                        lnt: "",
                        lat: "",
                        telephone: "",
                        contacts: "",
                        headImg: "",
                        isShow: ""
                    };
                    this.detailEditor.setContent("");
                    this.scopeEditor.setContent("");
                    this.imageUrl = "";
                    this.selectRow = null;
                    this.showEdit = true;
                },
                submitEvent(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.submitLoading = true;
                            this.disabled = true;
                            this.formData.profile = UE.getEditor('detailEditor').getContent();
                            this.formData.businessScope = UE.getEditor('scopeEditor').getContent()
                            // this.formData.parentDepartId = this.formData.parentDepartId.toString();
                            let params = Object.assign(this.formData);
                            let that = this;
                            webApi('/company/save', 'post', params, function (data) {
                                if (data.code == 0) {
                                    that.findList();
                                    that.$message({
                                        message: data.msg,
                                        type: 'success',
                                        center: true
                                    });
                                    that.showEdit = false;
                                } else {
                                    that.$message({
                                        message: data.msg,
                                        type: 'error',
                                        center: true
                                    });
                                }
                                that.disabled = false;
                            }, function (xhr, type, errorThrown) {});
                            this.submitLoading = false;
                        } else {
                            return false;
                        }
                    });
                },
                resetEvent(formName) {
                    this.formData = {
                        companyNo: "",
                        name: "",
                        type: "",
                        socialCreditCode: "",
                        profile: "",
                        businessScope: "",
                        address: "",
                        lnt: "",
                        lat: "",
                        telephone: "",
                        contacts: "",
                        headImg: "",
                        isShow: ""
                    };
                    this.imageUrl = "";
                    this.selectRow = null;
                },
                closeEvent(formName) {
                    this.showEdit = false;
                },
                editEvent(row) {
                    this.formData = {
                        companyNo: row.companyNo,
                        name: row.name,
                        type: row.type,
                        socialCreditCode: row.socialCreditCode,
                        profile: row.profile == null ? "" : row.profile,
                        businessScope: row.businessScope == null ? "" : row.businessScope,
                        address: row.address,
                        lnt: row.lnt,
                        lat: row.lat,
                        telephone: row.telephone,
                        contacts: row.contacts,
                        headImg: row.headImg,
                        isShow: row.isShow
                    };
                    this.imageUrl = row.headImg
                    this.selectRow = row;
                    this.showEdit = true;
                    this.detailEditor.setContent(this.formData.profile);
                    this.scopeEditor.setContent(this.formData.businessScope);
                },
                removeEvent(row) {
                    this.$XModal.confirm('您确定要删除该数据?').then(type => {
                        if (type === 'confirm') {
                            this.submitLoading = true;
                            let that = this
                            let ids = ""
                            row.forEach(item => {
                                ids += item.companyNo + ","
                            });
                            let params = Object.assign({
                                id: ids
                            });
                            webApi('/company/delete', 'get', params, function (data) {
                                if (data.code == 0) {
                                    that.findList()
                                    that.$message({
                                        message: data.msg,
                                        type: 'success',
                                        center: true
                                    });
                                    that.showEdit = false;
                                } else {
                                    that.$message({
                                        message: data.msg,
                                        type: 'error',
                                        center: true
                                    });
                                }
                                that.disabled = false;
                            }, function (xhr, type, errorThrown) {});
                            this.submitLoading = false;
                        }
                    });
                },
                handleAvatarSuccess(res, file) {
                    if(res.code == 200){
                        this.formData.headImg = res.data.url
                        this.imageUrl = URL.createObjectURL(file.raw);
                    }
                },
                beforeAvatarUpload(file) {
                  const isJPG = file.type === 'image/jpeg';
                  const isLt2M = file.size / 1024 / 1024 < 2;
                  if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                  }
                  return isLt2M;
                },
                cellDBLClickEvent({
                    row
                }) {
                    this.editEvent(row);
                },
                checkColumnMethod({
                    column
                }) {
                    if (['companyNo', 'name'].includes(column.property)) {
                        return false
                    }
                    return true
                },
                //编辑网格地图边界
                editMapMaker(){
                    //初始化地图
                    this.gridmapModal = true;
                    setTimeout(()=>{
                        this.initMap();
                    },100)
                },
                addressConfirm(){
                    let convertor = new BMapGL.Convertor();
                    let ggPoint = new BMapGL.Point(this.mapLnt,this.mapLat);
                    let pointArr = [];
                    let object = this;
                    pointArr.push(ggPoint);
                    console.log(pointArr);
                    convertor.translate(pointArr, COORDINATES_BD09 , COORDINATES_GCJ02 , function(data){
                        console.log(data);
                        if(data.status === 0) {
                            console.log(data.points[0]);
                            object.formData.lnt = data.points[0].lng;
                            object.formData.lat = data.points[0].lat;
                        }else{
                            object.formData.lnt = object.mapLnt;
                            object.formData.lat = object.mapLat;
                        }
                    });
                    setTimeout(()=>{
                        this.gridmapModal=!this.gridmapModal
                    },100)
                },
                closeModel(){
                    this.gridmapModal=!this.gridmapModal;
                },

                initMap(){
                    // GL版命名空间为BMapGL
                    // 按住鼠标右键，修改倾斜角和角度
	                var map = new BMapGL.Map("mapContent");    // 创建Map实例
                    this.map = map;
                    let object = this;
                    if(object.formData.lnt && object.formData.lat){
                        map.clearOverlays();
                        setTimeout(function(){
                            let convertor = new BMapGL.Convertor();
                            let ggPoint = new BMapGL.Point(object.formData.lnt,object.formData.lat);
                            let pointArr = [];
                            pointArr.push(ggPoint);
                            convertor.translate(pointArr, COORDINATES_GCJ02, COORDINATES_BD09, function(data){
                                if(data.status === 0) {
                                    map.addOverlay(new BMapGL.Marker(data.points[0]));
                                    object.mapLnt = data.points[0].lng;
                                    object.mapLat = data.points[0].lat;
                                }
                            });
                        }, 1000);
                    }
	                map.centerAndZoom(new BMapGL.Point(102.713491,25.049700), 11);  // 初始化地图,设置中心点坐标和地图级别
	                map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
                    map.addEventListener('click',function(e){
                        object.mapLnt = e.latlng.lng;
                        object.mapLat = e.latlng.lat;
                        map.clearOverlays();
                        var marker = new BMapGL.Marker(new BMapGL.Point(e.latlng.lng, e.latlng.lat));
                        map.addOverlay(marker);
                    });
                },
				//表头列排序
				tableSortChange(column, prop, order) {
					//点击排序按钮后拿到column.order，可以发送column.order给后台，后台再根据什么排序来返回排序过后的数据
					console.log(column + '---' + column.prop + '---' + column.order)
					this.order=column.order;
					this.prop=column.prop;
					this.findList();
				}
            }
        };

        var vue = Vue.extend(main);
        new vue().$mount('#app');
    }
</script>
</html>